<template>
	<view class="home">
		<cmd-nav-bar :fixed="true" back left-text="犬证申办" right-text="" title="" font-color="#464c5b" background-color="white"></cmd-nav-bar>
		<view class="mo_ban"></view>
		<view class="body_conteng">
			<view class="from_">
				<view class="from_text">请选择养犬类型</view>
				<view class="from_order" @click="Canine">
					<view class="order_left">{{val_text}}</view>
					<uni-icon class="order_icon" type="arrowright" size="25" color="#8f8f94"></uni-icon>
				</view>
			</view>
			<view class="from_">
				<view class="from_text">请选择办证类型</view>
				<view class="from_order">
					<view class="order_left">新版</view>
					<uni-icon class="order_icon" type="arrowright" size="25" color="#8f8f94"></uni-icon>
				</view>
			</view>
			<view class="from_buttom">
				<button class="button_next" @click="next_fn" type="primary">下一步</button>
			</view>
		</view>
		<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">
			<checkbox-group>
				<label class="uni_content uni-list-cell uni-list-cell-pd" @click="item_fn(item)" v-for="item in items" :key="item.value">
					<view class="check_left">
						<checkbox :value="item.value" :checked="item.checked" />
					</view>
					<view class="check_text">{{item.name}}</view>
				</label>
			</checkbox-group>
		</uni-popup>
	</view>
</template>
<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import uniIcon from "@/components/uni-icon.vue"
	import uniPopup from "@/components/uni-popup.vue"
	export default {
		props: {},
		components: {
			cmdNavBar,
			uniIcon,
			uniPopup
		},
		data() {
			return {
				val_text: "个人养犬",
				showPopupMiddle: false,
				popType: 'middle',
				items: [{
						value: 'personal',
						name: '个人养犬',
						checked: 'true'
					},
					{
						value: 'Company',
						name: '单位养犬',
					},
				]
			}
		},
		methods: {
			Canine() {

				this.showPopupMiddle = true;
			},
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopupMiddle = false;
			},

			item_fn(val) {
				console.log(val);
				this.items.forEach((item) => {
					item.checked = false;
					if (val.value == item.value) {
						item.checked = true;
						this.val_text = item.name;
						this.showPopupMiddle = false;

					}
				})
			},
			next_fn() {
				uni.navigateTo({
					"url": "./bidtwo",
				});
			}
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100%;
		background: white;
	}

	.mo_ban {
		width: 100%;
		height: 192upx;
	}

	.body_conteng {
		width: 80%;
		margin: auto;
	}

	.from_ {
		width: 100%;
		height: 140upx;

		border-bottom: 1px solid #d6d6d6;

		.from_text {
			font-size: 11px;
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			color: #657180;
		}

		.from_order {
			width: 100%;
			height: 80upx;
			display: flex;

			.order_left {
				line-height: 80upx;
				width: 70%;
				height: 100%;
				font-size: 15px;
				color: #000000;
			}

			.order_icon {
				width: 30%;
				height: 100%;
				text-align: right;
				line-height: 80upx;
			}
		}
	}

	.uni_content {
		height: 100upx;

		.check_left {
			width: 20%
		}

		.check_text {
			width: 80%;
			text-align: left;
		}
	}

	.from_buttom {
		width: 100%;
		height: 100upx;
		margin-top: 300upx;

		.button_next {}
	}
</style>
